<template>
  <div class="fix bottom-0 left-10 right-10 bg-white shadow-[0_-2px_100px_rgba(0,0,0,0.1)] z-50">
    <nav class="flex justify-around py-2">
      <router-link
          :to="{ name: 'Home' }"
          class="flex flex-col items-center px-10 py-5 text-primary-500"
      >
        <i class="fa fa-home text-xl"></i>
        <span class="text-xs mt-1">首页</span>
      </router-link>
      <router-link
          :to="{ name: 'Discover' }"
          class="flex flex-col items-center px-4 py-2 text-gray-500 hover:text-primary-500 transition-colors"
      >
        <i class="fa fa-compass text-xl"></i>
        <span class="text-xs mt-1">发现</span>
      </router-link>
      <router-link
          :to="{ name: 'Orders' }"
          class="flex flex-col items-center px-4 py-2 text-gray-500 hover:text-primary-500 transition-colors"
      >
        <i class="fa fa-list-alt text-xl"></i>
        <span class="text-xs mt-1">订单</span>
      </router-link>
      <router-link
          :to="{ name: 'Profile' }"
          class="flex flex-col items-center px-4 py-2 text-gray-500 hover:text-primary-500 transition-colors"
      >
        <i class="fa fa-user text-xl"></i>
        <span class="text-xs mt-1">我的</span>
      </router-link>
    </nav>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const activeTab = ref('Home')

onMounted(() => {
  // 根据当前路由设置激活的标签
  activeTab.value = window.location.pathname === '/' ? 'Home' :
      window.location.pathname === '/discover' ? 'Discover' :
          window.location.pathname === '/orders' ? 'Orders' : 'Profile'
})
</script>

<style scoped>
:root {
  --primary-color: #00b43c;
}

.text-primary-500 {
  color: var(--primary-color);
}
</style>